@property --c1 {
  syntax: '<color>';
  initial-value: transparent;
  inherits: false;
}
@property --c2 {
  syntax: '<color>';
  initial-value: transparent;
  inherits: false;
}
@property --c3 {
  syntax: '<color>';
  initial-value: transparent;
  inherits: false;
}
.colorthief-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 8px;
  background: #fff;
  padding:16px;
  background: linear-gradient(to bottom, var(--c1) 33%, var(--c2) 66%, var(--c3) 100%);
  animation: spread 0.35s ease-in forwards;
  transition-property: --c1, --c2, --c3;
  transition-duration: 0.35s;
  transition-timing-function: ease-in;
  height: calc(100vh - 322px);
  margin-top: 20px;
  .imgbox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 5px;
    border: 4px solid transparent;
    .color-img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }
  }
  .imgbox:hover {
    filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));
    border-color: #fff;
    transform: scale(1.05);
  }
}